<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>系统首页</title>

    <link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <link href="../assets/css/layui.css" rel="stylesheet" />

    <link rel="stylesheet" href="../assets/css/bootstrapValidator.min.css" />
	</head>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	
	<style>

h4{
	color: #6379BA;
    padding: 10px;
}

.input{
    color: red;
}

.xuanze {
    width:38.5%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}



body{background:#F1F1F1;}
</style>
	<body>

 <div class="form-content">
        <form id="form-user-add" class="form-horizontal">
            <input name="deptId" type="hidden" id="treeId"/>
            <h4>基本信息</h4>
            <hr />
            <div class="row">
          	<div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label"><span style="color: red; ">*</span>用户编码：</label>
                        <div class="col-xs-8" id="userId">
                            <input name="userId"  onchange="getUserId()"  placeholder="请输入用户编码" class="form-control" type="text" maxlength="10" required>
                        </div>
                    </div>
                </div>
              <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label"><span style="color: red; ">*</span>工号：</label>
                        <div id="jobNumber" class="col-xs-8">
                            <input name="jobNumber" onchange="getJobNumber()" class="form-control email" type="text" maxlength="10" placeholder="请输入工号" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label"><span style="color: red; ">*</span>手机号码：</label>
                        <div id="phone" class="col-xs-8">
                            <input name="phone" onchange="getPhone()" placeholder="请输入手机号码" class="form-control required" type="text" maxlength="11" required>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label">邮箱：</label>
                        <div class="col-xs-8">
                            <input name="email" class="form-control email" type="text" maxlength="50" placeholder="请输入邮箱" >
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label"><span style="color: red; ">*</span>登录账号：</label>
                        <div id="account" class="col-xs-8">
                            <input name="account" onchange="getAccount()" placeholder="请输入登录账号" class="form-control required" type="text" maxlength="30" required>
                        </div>
                    </div>
                </div>
              <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label">性别：</label>
                        <div class="col-xs-8">
                            <div class="input-group" style="width: 100%">
                                <select name="sexId" class="form-control m-b">
				                    <option value="1">男</option>
				                    <option value="2">女</option>
				                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
            	 <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label"><span style="color: red; ">*</span>登录密码：</label>
                        <div class="col-xs-8">
                            <input name="password" placeholder="请输入登录密码" maxlength="18" class="form-control" type="password"  required>
                        </div>
                    </div>
                </div>
               <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label">年龄：</label>
                        <div class="col-xs-8">
                            <input name="age" placeholder="请输入年龄" maxlength="3" class="form-control" type="text"  >
                        </div>
                    </div>
                </div>
            </div>
          <div class="row">
 			<div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label"><span style="color: red; ">*</span>用户状态：</label>
                        <div class="col-xs-8">
                            <div class="input-group" style="width: 100%">
                                <select name="userStatusId" class="form-control m-b">
				                    <option value="1">启用</option>
				                    <option value="2">禁用</option>
				                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label">身份证号：</label>
                        <div class="col-xs-8">
                            <input name="idNumber" placeholder="请输入登录密码" maxlength="18" class="form-control" type="text"  >
                        </div>
                    </div>
                </div>
            </div>  
            <div class="row">
                   <div class="col-xs-6">
                      <div class="form-group">
                          <label class="col-xs-4 control-label"><span style="color: red; ">*</span>用户名称：</label>
                          <div class="col-xs-8">
                              <input name="username" placeholder="请输入用户名称"  class="form-control" type="text" maxlength="16" required>
                          </div>
                      </div>
                  </div>
              <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-xs-4 control-label"><span style="color: red; ">*</span>用户部门：</label>
                        <div class="col-xs-8">
                            <div class="input-group" style="width: 100%">
                                <select  name="roleId" class="form-control mb">
				                   <!-- <option value="0">部门管理员</option>
				                    <option value="1">区域管理员</option>
				                    <option value="2">管理员</option>-->
				                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                      <div class="form-group">
                        <label class="col-xs-2 control-label"><span style="color: red; ">*</span>员工权限：</label>
                        <div class="col-xs-10">
                            <input name="permissionId" id="permissionId" value="" placeholder="请选择用户权限" readonly="readonly" class="xuanze" type="text" maxlength="160" required>
                            <button id="xuanze"   type="button" name="button" class="btn btn-sm btn-primary"><i class="fa fa-check"></i>选 择</button>
                        </div>

                    </div>
                </div>
            </div>
            <h4 >其他信息</h4>
              <hr />
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">备注：</label>
                        <div class="col-xs-10">
                            <textarea name="remark" maxlength="100" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                </div>
            </div>
         <!--   <div class="row">
                <div class="col-xs-offset-6 col-xs-12">
                    <div class="form-group">
                        <button  type="submit" name="submit" class="btn btn-sm btn-primary"><i class="fa fa-check"></i>保 存</button>
                        <button type="button" name="button" class="btn btn-sm btn-danger"><i class="fa fa-reply-all"></i>关 闭</button>
                     </div>
                </div>
            </div>-->
        </form>
    </div>


 <script src="../assets/js/jquery-3.4.1.min.js"></script>

 <script src="../assets/js/bootstrap.min.js"></script>

 <script type="text/javascript" src="../assets/js/bootstrapValidator.min.js"></script>

<!-- <script src="../assets/js/pages-js/InternalEmployees.js" charset="utf-8"></script>-->

 <script src="../assets/layui/layui-v2.5.4/layui.js" charset="utf-8"></script>
	</body>

<script type="text/javascript">

    $(function () {
       // getRole();
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
               userId: {
                    message: '用户编码验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户编码不能为空'
                        },
                        regexp: {
                            regexp: /^[A-Za-z0-9]+$/,
                            message: '用户编码只能包含大写、小写、数字和字母'
                        }
                    }
                },
                jobNumber: {
                    message: '工号验证失败',
                    validators: {
                        notEmpty: {
                            message: '工号不能为空'
                        },
                        regexp: {
                            regexp: /^[0-9]*$/,
                            message: '工号只能包含数字'
                        }
                    }
                },
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        regexp: {
                            regexp: /^[\u4e00-\u9fa5]{0,}$/,
                            message: '用户名只能包含汉字'
                        }
                    }
                },
                account: {
                    message: '登录账号验证失败',
                    validators: {
                        notEmpty: {
                            message: '登录账号不能为空'
                        },
                        stringLength: {
                            min: 4,
                            max: 16,
                            message: '登录账号长度必须在4到16位之间'
                        },
                        regexp: {
                            regexp: /^[A-Za-z0-9]+$/,
                            message: '用户编码只能包含大写、小写、数字和字母'
                        }
                    }
                },
                password: {
                    message: '登录密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '登录密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '登录密码长度必须在6到18位之间'
                        },
                    }
                },
                phone: {
                    message: '手机号码验证失败',
                    validators: {
                        notEmpty: {
                            message: '手机号码不能为空'
                        },
                        regexp: {
                            regexp: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
                            message: '手机号码格式不正确'
                        }
                    }
                },
            }
        });
    });

	function getRole(roleId) {
        $.ajax({
                type:"post",
                url:"/role/getRoleByUserId",
                contentType:"application/json;charset=utf-8",
                success:function (result) {
                    var gl="";
                    $.each(result.rlist,function (i,r) {
                        if(roleId==r.roleId){
                           gl+= '<option value='+r.roleId+' selected="selected">'+r.description+'</option>';
                        }else
                        {
                            gl+='<option value='+r.roleId+'>'+r.description+'</option>';
                        }
                    });
                    $(".mb").html(gl);
                }
        });
    }

	var userId="";
    var jobNumber="";
    var phone="";
    var account="";
   /* var idNumber="";*/
	function getUserId() {
        $.post("/user/verifyInfo", {
            userId:$("input[name='userId']").val(),
        }, function (result) {
            if (result.success) {
                $("input[name='userId']").removeClass("input");
                $("#yz").remove();
                userId=true;
            } else {
                $("input[name='userId']").addClass("input");
                var yz="<small id='yz' style='color: red'>格式正确,数据库已存在</small>" ;
                $("#userId").append(yz);
                userId=false;
            }
        });
    }

    function getJobNumber() {
        $.post("/user/verifyInfo", {
            jobNumber:$("input[name='jobNumber']").val(),
        }, function (result) {
            if (result.success) {
                $("input[name='jobNumber']").removeClass("input");
                $("#yz").remove();
                jobNumber=true;
            } else {
                $("input[name='jobNumber']").addClass("input");
                var yz="<small id='yz' style='color: red'>格式正确,数据库已存在</small>" ;
                $("#jobNumber").append(yz);
                jobNumber=false;
            }
        });
    }

    function getPhone() {
        $.post("/user/verifyInfo", {
            phone:$("input[name='phone']").val(),
        }, function (result) {
            if (result.success) {
                $("input[name='phone']").removeClass("input");
                $("#yz").remove();
                phone=true;
            } else {
                $("input[name='phone']").addClass("input");
                var yz="<small id='yz' style='color: red'>格式正确,数据库已存在</small>" ;
                $("#phone").append(yz);
                phone=false;
            }
        });
    }

    function getAccount() {
        $.post("/user/verifyInfo", {
            account:$("input[name='account']").val(),
        }, function (result) {
            if (result.success) {
                $("input[name='account']").removeClass("input");
                $("#yz").remove();
                account=true;
            } else {
                $("input[name='account']").addClass("input");
                var yz="<small id='yz' style='color: red'>格式正确,数据库已存在</small>" ;
                $("#account").append(yz);
                account=false;
            }
        });
    }
  /*  function getidNumber() {
        $.post("/user/verifyInfo", {
            idNumber:$("input[name='idNumber']").val(),
        }, function (result) {
            if (result.success) {
                idNumber=true;
            } else {
                idNumber=false;
            }
        });
    }*/

        function addUser() {
            var role=$("input[name='role']").val();
        if(userId==true&&jobNumber==true&&phone==true&&account==true&&role!="")
        {
            $.post("/user/addUser", {
                userId:$("input[name='userId']").val(),
                jobNumber:$("input[name='jobNumber']").val(),
                username:$("input[name='username']").val(),
                email:$("input[name='email']").val(),
                age:$("input[name='age']").val(),
                phone:$("input[name='phone']").val(),
                idNumber:$("input[name='idNumber']").val(),
                sexId:$("select[name='sexId']").val(),
                userStatusId:$("select[name='userStatusId']").val(),
                roleId:$("select[name='roleId']").val(),
                remark:$("textarea[name='remark']").val(),
                account:$("input[name='account']").val(),
                password:$("input[name='password']").val(),
                permissionId:$("input[name='permissionId']").val(),
            }, function (result) {
                if (result.success) {
                    parent.layer.msg('用户创建成功！',function() {time:1});
                    setInterval(function(){
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    },1000);
                    /* parent.layer.table.reload();*/
                } else {
                    parent.layer.msg(result.errorInfo);
                }
            })
        }else
        {
            parent.layer.msg("信息不能为空");
        }
    };

    function getUser(userId) {
        $.ajax({
            type:"get",
            url:"/user/getUserByUserId?userId="+userId,
            success:function (result) {
                if(result!=null&&result!="")
                {
                    $.each(result.ulist,function (i,v) {
                            $("input[name='userId']").val(v.user_id);
                            $("input[name='jobNumber']").val(v.job_number),
                            $("input[name='username']").val(v.username),
                            $("input[name='email']").val(v.email),
                            $("input[name='age']").val(v.age),
                            $("input[name='phone']").val(v.phone),
                            $("input[name='idNumber']").val(v.id_number),
                            $("select[name='sexId']").val(v.sex_id),
                            $("select[name='userStatusId']").val(v.user_status_id),
                            $("select[name='roleId']").val(v.role_id),
                            $("textarea[name='remark']").val(v.remark),
                            $("input[name='account']").val(v.account),
                            $("input[name='password']").val(v.password)
                    });
                        $("input[name='permissionId']").val(result.plist);
                }else
                {
                    parent.layer.msg("请选择用户");
                }
            }
        });
    }

    function upUserOrRole(userId) {
        $.post("/user/upUserOrRole", {
            userId:$("input[name='userId']").val(),
            jobNumber:$("input[name='jobNumber']").val(),
            username:$("input[name='username']").val(),
            email:$("input[name='email']").val(),
            age:$("input[name='age']").val(),
            phone:$("input[name='phone']").val(),
            idNumber:$("input[name='idNumber']").val(),
            sexId:$("select[name='sexId']").val(),
            userStatusId:$("select[name='userStatusId']").val(),
            roleId:$("select[name='roleId']").val(),
            remark:$("textarea[name='remark']").val(),
            account:$("input[name='account']").val(),
            password:$("input[name='password']").val(),
            permissionId:$("input[name='permissionId']").val(),
        }, function (result) {
            if (result.success) {
                parent.layer.msg('用户修改成功！',function() {time:1});
                setInterval(function(){
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                },1000);
            } else {
                parent.layer.msg(result.errorInfo);
            }
        });
    }

    layui.use(['table','layer','form', 'layedit','jquery'], function(){
        var table = layui.table
            ,layer = layui.layer
            ,form = layui.form
            ,layedit = layui.layedit
            ,$ = layui.jquery;
    $("#xuanze").on("click", function(){
        layer.open({
            type: 2,
            closeBtn: 1,
            offset: '100px',
            title: "树形菜单",
            area: ['20%','70%'],
            content: ['/page/one.html','no'],
           // btn:['确认','取消'],
            success: function(layero, index){
                var body = layer.getChildFrame('body', index);
                var iframeWin = window[layero.find('iframe')[0]['name']];
                //设置body为全局变量
//                alert(iframeWin);
              // alert(JSON.stringify(checkedData));
               // var body = layer.getChildFrame('body', index);
               // var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                //console.log(body.html()) //得到iframe页的body内容
                //console.log("cname:"+body.find('#cname').val());
                //var p_o = iframeWin.getObj();
                //console.log("p_o:"+p_o);
                //layer.full(index);
            },
           // yes: function(index, layero){

              //  alert(2);
           // }
        });
      });
    });
</script>
</html>
